<!-- home -->
<template>
  <div class="container">

    <van-nav-bar
      title="我的工作汇报"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <van-cell-group v-for="item in ywyPlanList " :key="item.recordid">
      <van-cell  @click="onSelectYwy(item)" title-width="60%" >
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div>
            <span class="custom-title">{{ item.ywyname }}</span>
          </div>
          <div style="padding-top: 5px;color: #B2B2B2">
            日期：{{item.ssrq}}
          </div>
          <div style="padding-top: 5px;color: #B2B2B2">
            工作计划：{{item.content}}
          </div>
          <div style="padding-top: 5px;color: red">
            评价等级：<van-tag :type="item.gzpj == '1' ? 'primary': item.gzpj == '2' ? 'warning':  item.gzpj == '3' ? 'success':'danger'" style="margin-left: 10px;" v-if="item.gzpj">{{item.gzpj == '1' ? '优秀': item.gzpj == '2' ? '良好':  item.gzpj == '3' ? '一般': '较差'}}</van-tag>
          </div>
          <div style="padding-top: 5px;color: red">
            评价内容：{{item.pjnr}}
          </div>
        </template>
      </van-cell>
    </van-cell-group>

  </div>
</template>

<script>

import { Dialog, Toast, Grid, GridItem, Calendar, Cell } from 'vant'

import { addCost, listJobplan, queryUserInfo, updateJobplan, addJobrecord, listJobrecord } from '../../api/api'

export default {
  name: 'MyGzhb',
  data() {
    return {

      pageNum: 1,
      pageSize: 10,
      date: '',
      show: false,
      dateshow: false,
      minDate: new Date(2021, 1, 1),
      ywyname: '',
      bz: '',
      currentDate: new Date(),
      planid: '',
      content: '',
      actions: [{ id: '1', name: '找客户' }, { id: '2', name: '拜访客户' }, { id: '3', name: '培训客户' }],
      typename: '',
      jdShow: false,
      value: 0,
      jobShow: false,
      type: '',
      jobContent: '',
      khsl: '',
      jobtypename: '请选择',
      jobtype: '',
      jobRecordList: [],
      viewShow: false,
      ywyPlanList: [],
      pjnr: '',
      userid: ''

    }
  },

  created() {
    var day3 = new Date()
    var s3 = day3.getFullYear() + '-' + (day3.getMonth() + 1) + '-' + day3.getDate()
    this.currentDate = day3
    this.date = s3
    // this.userid = this.$route.query.userid
    this.queryUserInfo()
  },
  mounted() {

  },

  methods: {

    updateGzpj(type) {
      const param = { gzpj: type, planid: this.planid, pjnr: this.pjnr }

      updateJobplan(param).then(response => {
        if (response.code === 200) {
          Dialog.alert({
            title: '',
            message: '评价完成'
          }).then(() => {
            // on close
            this.viewShow = false
            this.queryYwyPlan()
          })
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    onSelectYwy(item) {
      this.viewShow = true
      this.userid = item.userid
      this.planid = item.planid
      this.queryJobplan()
      this.queryJobrecord()
    },

    queryYwyPlan() {
      const param = { userid: this.userid, order: '1', pageNum: 1, pageSize: 100 }
      listJobplan(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          const list = response.rows
          this.ywyPlanList = list
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    showJobDialog() {
      this.jobShow = true
    },

    showType() {
      this.show = true
    },

    onSelectType(item) {
      this.jobtype = item.id
      this.jobtypename = item.name
      this.show = false
    },

    onConfirmJobrecord() {
      const param = { content: this.jobContent, khsl: this.khsl, type: this.jobtype, userid: this.userid, ywyname: this.ywyname, ssrq: this.date }

      addJobrecord(param).then(response => {
        if (response.code === 200) {
          Dialog.alert({
            title: '',
            message: '保存成功'
          }).then(() => {
            // on close
            this.queryJobrecord()
            this.jobShow = false
          })
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    onCancelJobrecord() {

    },

    onConfirmJd() {
      const param = { planid: this.planid, wcjd: this.value }

      updateJobplan(param).then(response => {
        if (response.code === 200) {
          Dialog.alert({
            title: '',
            message: '进度更新成功'
          }).then(() => {
            // on close
            this.jdShow = false
          })
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    onCancelJd() {
      this.jdShow = false
    },

    showJdDialog() {
      this.jdShow = true
    },

    queryJobrecord() {
      const param = { ssrq: this.date, userid: this.userid, ywyname: this.ywyname }
      const that = this
      listJobrecord(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          const list = response.rows
          that.jobRecordList = list
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    queryJobplan() {
      const param = { ssrq: this.date, userid: this.userid, ywyname: this.ywyname }
      const that = this
      listJobplan(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          const list = response.rows
          const actions = that.actions
          if (list && list.length > 0) {
            that.content = list[0].content
            that.type = list[0].type
            that.szdz = list[0].szdz
            that.value = list[0].wcjd
            for (var i = 0; i < actions.length; i++) {
              if (actions[i].id == list[0].type) {
                that.typename = actions[i].name
              }
            }
            that.planid = list[0].planid
          } else {
            that.content = ''
            that.type = ''
            that.szdz = ''
            that.typename = '请选择'
            that.planid = ''
            that.value = 0
          }
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    queryUserInfo() {
      const param = {}
      queryUserInfo(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          this.ywyname = response.data.name
          this.userid = response.data.userid
          this.queryYwyPlan()
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    addyj() {
      this.$router.push({ path: '/addyj', query: {}})
    },

    onDisplay() {
      this.dateshow = true
    },
    onClose() {
      this.show = false
    },

    onConfirm(event) {
      this.dateshow = false
      this.date = this.formatDate(event)
      this.queryYwyPlan()
    },

    formatDate(date) {
      const date1 = new Date(date)
      return `${date1.getFullYear()}-${date1.getMonth() + 1}-${date1.getDate()}`
    },

    showFblx() {
      this.show = true
    },

    showDklx() {
      if (!this.ywlx) {
        Dialog.alert({
          title: '',
          message: '先选择业务类型'
        })
        return
      }
      this.dklxshow = true
    },

    doSubmit() {
      if (!this.date) {
        Toast.fail('请选择日期')
        return
      }

      if (!this.zje) {
        Toast.fail('请填写总金额')
        return
      }

      const costid = this.costid

      if (costid) {
        const param = { date: this.date, zje: this.zje, bz: this.bz, costid: this.costid }
        updateCost(param).then(response => {
          if (response.code === 200) {
            Dialog.alert({
              title: '',
              message: '修改成功'
            }).then(() => {
              // on close
              this.$router.go(-1) // 返回上一层
            })
          } else {
            Toast.fail(response.msg)
          }
        })
      } else {
        const param = { date: this.date, zje: this.zje, bz: this.bz }
        addCost(param).then(response => {
          if (response.code === 200) {
            Dialog.alert({
              title: '',
              message: '提交成功'
            }).then(() => {
              // on close
              this.$router.go(-1) // 返回上一层
            })
          } else {
            Toast.fail(response.msg)
          }
        })
      }
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    }

  }
}
</script>
<style lang="scss" scoped>

.container{
  width: 100%;
  height: calc(100vh);
  background-color: white;
}

.navclass{
  background-color:#20a0ff;
  color: white;
}

.btn{
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
  background-color: white;
  padding-bottom: 150px;
}

.custom-button {
  width: 26px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 100px;
}

</style>
